<template>
	<div class="review-content">
		<div class="head flex-between">
			<span class="title ml20">
				{{ $t('agent.agent_line_liquidation_bill_detail') }}
			</span>
			<div class="right-btn mr15">
				<i class="el-icon-close" @click="goBack"></i>
			</div>
		</div>
		<el-form
			ref="form"
			:inline="true"
			:model="queryData"
			label-width="100px"
			class="flex-warp-container mt30"
		>
			<el-form-item class="flex-row-container">
				<el-input
					v-model="queryData.inputValue"
					class="input-with-select"
					:placeholder="$t('common.please_enter')"
					clearable
					size="medium"
					@input="forceUpdate"
				>
					<el-select
						slot="prepend"
						v-model="queryData.inputType"
						width="110px"
						style="width:110px"
						:placeholder="$t('common.please_choose')"
					>
						<el-option
							:label="$t('funds.bg_name')"
							:value="1"
						></el-option>
						<el-option
							:label="$t('funds.fund_audit.parent_proxy_account')"
							:value="2"
						></el-option>
					</el-select>
				</el-input>
			</el-form-item>
			<el-form-item :label="$t('agent.account_type') + ':'">
				<el-select
					v-model="queryData.accountType"
					size="medium"
					:placeholder="$t('common.all')"
					clearable
				>
					<el-option
						:label="$t('common.all')"
						:value="undefined"
					></el-option>
					<el-option
						v-for="item in accountTypeArr"
						:key="item.code"
						:label="item.description"
						:value="item.code"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					:disabled="loading"
					:loading="loading"
					size="medium"
					@click="searchDetail"
				>
					{{ $t('common.search') }}
				</el-button>
				<el-button
					icon="el-icon-refresh-left"
					:disabled="loading"
					size="medium"
					@click="resetForm"
				>
					{{ $t('common.reset') }}
				</el-button>
				<!-- v-if="hasPermission('404011')" -->
				<el-button
					v-if="hasPermission('90870161')"
					icon="el-icon-download"
					type="warning"
					:disabled="loading"
					:loading="exportBtnLoading"
					size="medium"
					@click="handleExportExcel"
				>
					{{ $t('common.export') }}
				</el-button>
			</el-form-item>
		</el-form>
		<LabelCheckboxMultiple
			ref="checkboxDom"
			:dataList="dataList"
			@getSelectData="getSelectData($event)"
			:showCheckComponent="true"
		></LabelCheckboxMultiple>
		<CardDescriptionItem
			:columns="4"
			:isShowComponent="true"
			:size="'medium'"
			:colon="true"
			:isShowBorder="false"
			:directions="'horizontal'"
			:descriptionItemList="lists">
		</CardDescriptionItem>
		<div class="pt10">
			<ReportDetailTable
				:tableDataColumn="tableDataColumn"
				:tableDataList="tableData"
				:tableLoading="loading"
			></ReportDetailTable>
		</div>
		<!-- 分页 -->
		<el-pagination
			v-show="!!total"
			class="text-right"
			:current-page.sync="pageNum"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:page-size="pageSize"
			:page-sizes="$store.getters.pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
	</div>
</template>
<script>
import list from '@/mixins/list'
import i18n from '@/locales'
import { getColumns } from './detailColumns'
export default {
	components: {
		ReportDetailTable: () => import('@/components/ReportDetailTable')
	},
	mixins: [list],
	props: {
		rowVal: {
			type: Object,
			default: () => {}
		},
		closeDialog: {
			type: Function,
			default: () => {}
		},
		agentLineLiquidationDialog: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			loading: false,
			exportBtnLoading: false,
			queryData: {
				inputType: 1
			},
			tableData: [],
			total: 0,
			tableDataColumn: [],
			dateList: '',
			selectList:[],
			dataList: [
				{
					label: '',
					isCheck: true,
					showColon: false,
					checkedData: [1,2,3,4],
					allSelectText: i18n.t(`common.all`),
					dataChildList: [
						{
							label: 1,
							text: '直属下级代理'
						},
						{
							label: 2,
							text: '全部下级代理'
						},
						{
							label: 3,
							text: '直属会员'
						},
						{
							label: 4,
							text: '全部下级会员'
						}
					]
				}
			],
			lists: [
				{
					label:i18n.t(`agent.liquidation_agent_account`),
					text: ''
				},
				{
					label:i18n.t(`agent.recycle_model`),
					text: ''
				},
				{
					label:i18n.t(`agent.liquidation_time`),
					text: ''
				},
				{
					label:i18n.t(`common.updateBy`),
					text: ''
				}
			]
		}
	},
	computed: {
		accountTypeArr() {
			return this.globalDics.recycleUserTypeList || []
		}
	},
	created() {
		this.loadDetailData()
	},
	mounted() {
		this.tableDataColumn = getColumns()
		this.lists[0].text = this.rowVal?.userName
		this.lists[1].text = this.rowVal?.recycleMode === 2 ? i18n.t(`agent.allAmount`) : i18n.t(`common.all`)
		this.lists[2].text = this.rowVal?.resetCreatedAt
		this.lists[3].text = this.rowVal?.operatorUser
	},
	methods: {
		goBack() {
			this.$emit('goBack')
		},
		searchDetail() {
			this.pageNum = 1
			this.loadDetailData()
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadDetailData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadDetailData()
		},
		forceUpdate(value) {
			this.$forceUpdate()
			this.queryData.inputValue = this.queryData.inputValue.replace(
				/[^A-Za-z0-9]/g,
				''
			)
		},
		resetForm() {
			this.dataList.isCheck = true
			this.dataList[0].checkedData = [0,1,2,3,4]
			this.dataList[0].isCheck = true
			this.queryData = {
				inputType: 1
			}
			this.loadDetailData()
		},
		getSelectData(data) {
			this.selectList = data
		},
		loadDetailData() {
			this.tableData = []
			this.loading = true
			let params = {
				...this.queryData,
				batchNo: this.rowVal?.batchNo,
				dataAreaType: this.dataList[0].checkedData
			}
			params = {
				...this.getParams(params)
			}
			if (params.inputType === 1) {
				params.account = params.inputValue || undefined
				params.directProxyAccount = undefined
			} else {
				params.directProxyAccount = params.inputValue || undefined
				params.account = undefined
			}
			delete params.inputValue
			delete params.inputType
			this.$api
				.getLiquidationListDetail(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						const {records, total} = res?.data || {}
						this.tableData = records || []
						this.total = total
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleClose() {
			this.closeDialog(false)
		},
		reset() {
			this.$refs.checkboxDom.clearAllSelect()
		},
		handleExportExcel() {
			let params = {
				...this.queryData,
				batchNo: this.rowVal?.batchNo,
				dataAreaType: this.dataList[0].checkedData
			}
			params = {
				...this.getParams(params)
			}
			if (params.inputType === 1) {
				params.account = params.inputValue || undefined
				params.directProxyAccount = undefined
			} else {
				params.directProxyAccount = params.inputValue || undefined
				params.account = undefined
			}
			delete params.inputValue
			delete params.inputType
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'getProxyLiquidationDetailExport',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__footer-wrapper .cell {
	display: flex;
	justify-content: center;
	align-items: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
::v-deep .el-table__body-wrapper {
	overflow-y: auto;
	max-height: 45vh;
}
.review-content {
	margin: 24px 16px 20px 16px;
	color: #666666;
	.head {
		height: 40px;
		line-height: 40px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
			cursor: pointer;
			i {
				color: #fff;
				font-size: 20px;
			}
		}
	}
}
</style>
